<template>
<div class="fans_container">
    <div class="fansitem" v-for="(item, index) in fanslist" :key="index" v-if="type==1">
        <div class="left">
            <div>
                <avatar :avatar="item.user_fans.avatar" 
                        :Level="item.user_fans.partner_level" 
                        :userId="item.user_fans.id" 
                        :isAuth="item.user_fans.is_auth" 
                        :isPartner="item.user_fans.is_partner"></avatar>
            </div>
            <div class="info_">
                <span class="usrname">{{item.user_fans.nickname}}</span>
                <span class="des" v-if="item.user_fans.brief">简介：{{item.user_fans.brief}}</span>
                <span class="des" v-else>这个人很懒，没有填写简介</span>
            </div>
        </div>
        <!-- <div class="right">
                <div class="Follow"> 
                <button class="follow followed"  @click="tofollow(index,item)">已关注</button>
            </div>
        </div> -->
    </div>
    <div class="fansitem" v-for="(item, index) in fanslist" :key="index" v-if="type==2">
        <div class="left">
            <div>
                <avatar :avatar="item.user_follows.avatar" 
                        :Level="item.user_follows.partner_level" 
                        :userId="item.user_follows.id" 
                        :isAuth="item.user_follows.is_auth" 
                        :isPartner="item.user_follows.is_partner"></avatar>
            </div>
            <div class="info_">
                <span class="usrname">{{item.user_follows.nickname}}</span>
                <span class="des" v-if="item.user_follows.brief">简介：{{item.user_follows.brief}}</span>
                <span class="des" v-else>这个人很懒，没有填写简介</span>
            </div>
        </div>
        <div class="right">
            <div class="Follow"> 
                <button class="follow followed"  @click="tofollow(index,item)">已关注</button>
            </div>
        </div>
    </div>
    <div v-if="isempty" class="que">
        <img :src="img+'/que/no_fans@2x.png'" alt="" v-if="type==1">
        <img :src="img+'/que/no_person@2x.png'" alt="" v-if="type==2">
    </div>
    </div>
</template>

<script>
import Follow from "@/components/follow"
import avatar from "@/components/avatar"

import {follow} from "@/api/operate"
import {
    myfans
} from '@/api/my'

import {
    guanzhu
} from '@/api/my'

export default {
    components: {
        Follow,
        avatar,
   },
    data() {
        return {
            fanslist: [],
            isempty: false,
            type: "",
            Page: 1,
            lastpage: '',
            isnull: true,
            img: this.$URL.imgurl,
        }
    },
    methods: {
        getfans() {
            myfans({
                type: this.type,
                page: this.Page
            }).then(res => {
                if(res.code==200){
                    this.Page = res.data.current_page
                    this.lastpage = res.data.last_page
                    this.fanslist = this.isnull ? res.data.data : this.fanslist.concat(res.data.data)
                    this.isnull = false
                }else if(res.code==201){
                    this.isempty = true
                    this.fanslist=null
                }
                
            }).catch(err => {
                this.isempty = true
                this.fanslist=null
            })
        },
        tofollow(index,item){
            wx.showModal({
                title: '提示',
                content: '确定取关此人？',
                showCancel: true,
                cancelText: '取消',
                cancelColor: '#000000',
                confirmText: '确定',
                confirmColor: '#3CC51F',
                success: (result) => {
                    if (result.confirm) {
                        let data={};
                            data.id=item.user_id;
                            follow(data).then(res=>{
                                if(res.code==200){
                                   this.fanslist.splice(index,1)
                                }
                            })
                    }
                },
                fail: () => {},
                complete: () => {}
            });
              
        }
    },
    onLoad() {
        Object.assign(this.$data, this.$options.data())
        this.type = this.$mp.query.type
        this.getfans()
        if (this.$mp.query.type == 2) {
            wx.setNavigationBarTitle({
                title: '关注'
            })
        } else {
            wx.setNavigationBarTitle({
                title: '粉丝'
            })
        }
    },
    onShow() {
        // this.type = this.$mp.query.type
        // this.getfans()

    },
    onUnload() {
        this.fanslist = []
        this.isempty = false
        this.isnull = true
        this.Page=1
    },
    onReachBottom() {
        this.Page += 1
        if (this.Page > this.lastpage) return
        this.getfans()
    },
    onPullDownRefresh() {
        this.isnull=true
        wx.showNavigationBarLoading() //在标题栏中显示加载
        setTimeout(() => {
            this.getfans()
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
        }, 1500)

    },
}
</script>

<style lang="scss">
.fans_container {
    padding: 15px;

    .que {
        display: flex;
        justify-content: center;
        height: 60vh;
        align-items: center;
        img{
             width: 203px ;
            height: 162px;
        }
    }

    .fansitem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .right {

            font-size: 14px;

            .yiguanzhu {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 69px;
                height: 27px;
                background: rgba(234, 247, 255, 1);
                border: 1px solid rgba(70, 183, 255, 1);
                border-radius: 5px;
                color: #46B7FF;
            }

            .weiguanzhu {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 69px;
                height: 27px;
                background: rgba(69, 183, 255, 1);
                border-radius: 5px;
                color: #fff;

                .add_o {
                    // line-height: 1;
                    font-size: 14px;
                    height: 14px;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }

        .left {
            height: 40px;
            display: flex;
            justify-content: flex-start;

            .info_ {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 11px;

                .usrname {
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(51, 51, 51, 1);
                }

                .des {
                    font-size: 12px;
                    font-weight: 500;
                    color: rgba(102, 102, 102, 1);
                }
            }

            .img {
                height: 40px;
                width: 40px;
                border-radius: 50%;
                border: 1px solid rgba(70, 183, 255, 1);
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }
    }
}
</style>
